<!--   @author  Created By  YS  on 2023/11/1 -->
<!--   @describe 实名认证/拍照提交/操作成功-->

<template>
  <div class="body">
    <template v-if="pageType == 'form'">
      <div class="flex-row">
        <div class="title-h3">真人实名认证</div>
        <div class="flex-row">
          <div class="title-h4"> 获取头像认证标识</div>
          <image class="icon" src="../../static/common/authentication.png"></image>
        </div>
      </div>
      <view class="input-box">
        <input type="text" value=""  class="input-phone" placeholder="请输入真实姓名"/>
      </view>
      <view class="input-box">
        <input type="text" value=""  class="input-phone" placeholder="请输入本人身份证号码"/>
      </view>
      <view>
        <div class="flex-row agreement">

          <u-checkbox-group
              v-model="checkboxValue1"
              placement="column"
              shape="circle"
              @change="radioChange"
          >
            <u-checkbox
                v-for="(item, index) in radiolist1"
                :key="index"
                :label="item.name"
                :name="item.value"
            >
            </u-checkbox>
          </u-checkbox-group>我已仔细阅读并同意真人实名认证需要输入我的姓名和身份证号，手持身份证的照片，来确保头像、身份证都是我本人，每个身份证只能认证一个账号
        </div>
        <cBtn text="下一步"></cBtn>
      </view>
    </template>
<!--    拍照-->
    <template v-if="pageType == 'photo'">
      <view class="title-h3">提交手持身份证件照</view>
      <image class="idcard" src="../../static/setting/authentication.png"></image>
      <div class="warning-text">
        <div>面部无帽子、口罩、刘海等遮挡，面部表情正常          </div>
        <div>身份证正面信息要求清晰可辨</div>
        <div>背景光线柔和无爆光</div>
      </div>
      <div class="tips-text">
        该信息仅用于平台实名认证，其它用户不可查看
      </div>
      <cBtn text="下一步"></cBtn>
    </template>
    <template v-if="pageType == 'success'">
        <image class="success-img" src="../../static/setting/examine.png"></image>
        <text class="success-text">认证成功</text>
        <cBtn text="确定" @click="confirm"></cBtn>
    </template>


  </div>
</template>

<script>
import cBtn from "../../components/cBtn"
export default {
  name: 'certification',
  components: {
    cBtn
  },
  data() {
    return {
      pageType:'success',
      checkboxValue1:'',
      radiolist1: [{
        disabled: false,
        name:'',
        value:'选中'
      },
      ],
    }
  },
  methods: {
    radioChange(e) {
      console.log(e);
    },
    confirm(){

    }
  }
}
</script>

<style lang='scss' scoped>
  @import "../../assets/css/base.scss";
  .body {
    padding-top: 25rpx;
  }
  .flex-row{
    justify-content: space-between;
    padding-right: 30rpx;
  }
  .title-h4{
      width: 185rpx;
      height: 33rpx;
      opacity: 1;
      color: #666666;
      text-align: left;
      font-size: 24rpx;
      font-weight: 0;
      font-family: "PingFangSC-Medium";
      line-height: 29rpx;
      letter-spacing: -0.89rpx;
  }
  image.icon{
      width: 104rpx;
      height: 33rpx;
  }
  .agreement{
    font-size: 24rpx;
    color:#999999;
    margin: 55rpx auto;
    padding-left: 70rpx;
    padding-right: 70rpx;
  }
  image.idcard{
    width: 637rpx;
    height: 407rpx;
    border-radius: 20rpx;
    display: block;
    font-size: 24rpx;
    border: 1rpx solid #979797;
    margin: 48rpx auto 48rpx;
  }
  .warning-text{
      width: 504rpx;
      height: 139rpx;
      opacity: 1;
      color: #ff0000;
      text-align: left;
      font-size: 24rpx;
      font-weight: 0;
      line-height: 29rpx;
      margin-left: 72rpx;

  }
  .tips-text{
      width: 504rpx;
      height: 33rpx;
      opacity: 1;
      color: #999999;
      text-align: left;
      font-size: 24rpx;
      font-weight: 0;
      line-height: 29rpx;
      margin-bottom: 240rpx;
      margin-left: 72rpx;
  }
  .success-img{
    width: 200rpx;
    height: 200rpx;
    margin: 208rpx auto 45rpx;
    display: block;
  }
  .success-text{
    height: 56rpx;
    opacity: 1;
    color: #333333;
    text-align: center;
    font-size: 40rpx;
    font-weight: 0;
    line-height: 48rpx;
    margin-bottom: 400rpx;
    display: block;
  }
</style>
